[CSS] Flexbox 내부의 좌우 상하 정렬 방법 알아보기

Last Modified : 2021-12-01 / Created : 2021-12-01

5,380
View Count

주소 복사하기

css를 사용하면서 DOM 요소의 레이아웃에 사용되던 inline, block 타입의 요소를 이제는 쉽게 flex, inline-flex를 사용할 수 있게되었습니다. flexbox 형태의 레이아웃이 모든 메이저 브라우저에서 사용 가능하게 되었기 때문이죠.

그래서 이미 알고 있지만 flexbox를 사용시 간단하면서 실수할 수 있는 부분에 대하여 알아보려고 합니다. 바로 margin값과 함께 사용할 경우 말이죠...

(이 글은 flexbox를 어느 정도 사용할 수 있다라는 가정하에 적은 내용입니다. flexbox layout 관련하여 아래 글을 참고하세요.)
https://webisfree.com/2018-12-28/css-display-flex-사용방법-및-예제보기

! Flexbox에서 margin: auto를 사용하는 정렬 방법

여기서 flexbox는 flex를 사용한 레이아웃 방식의 코드 구현을 의미합니다. 즉 만약 flex를 적용한 특정 DOM이 존재한다면 이제 flexbox 하위의 요소는 margin값 auto를 사용하여 정렬하는 것이 가능합니다. 아래처럼 말이죠.

.flex {
display: flex;
}

.flex .childA {
margin: auto;
margin-left: auto;
margin-top: auto;
}

margin에 auto 값을 사용할 경우 설정된 방향에 자동으로 일정 간격을 유지하게 됩니다. 그래서 좌우 또는 상하에 auto값을 주어 가운데 정렬 또는 세로 정렬이 손쉽게 가능하게 됩니다.(참고로 기존의 block 요소 역시 가능하지 않았냐고 물어보신다면 flex 레이아웃 방식이 더 활용하기 쉽다고 얘기할 수 있겠습니다. 그리고 horizontal(가로 방향) 정렬만 사용 가능했다면 flex는 세로 방향의 정렬(vertical alignment)에도 사용할 수 있죠.)

그럼 간단한 예제 코드를 살펴봅니다.

! Flexbox에 margin auto를 사용한 예제보기
첫 번째 예제는 좌우 정렬 그리고 상하 정렬의 방법입니다. 가장 많이 쓰이는 방식이라고 할 수 있죠. 먼저 구현된 모습을 보면 각각 아래와 같이 정렬이 적용되어 나타나게 됩니다.

@ flex 좌우 정렬 예제

<div class="exam0">
<div class="childA">ChildA</div>
</div>
<style>
.exam0 {
display: flex;
width: 300px;
height: 300px;
background-color: #ddd;
}
.exam0 .childA {
margin-left: auto;
margin-right: auto;
background-color: #000;
color: #fff;
}
</style>

적용된 코드는 아래와 같습니다.

<div class="exam0">
<div class="childA">ChildA</div>
</div>

.exam0 {
display: flex;
width: 300px;
height: 300px;
background-color: #ddd;
}
.exam0 .childA {
margin-left: auto;
margin-right: auto;
background-color: #000;
color: #fff;
}

다음으로 아래는 상하 정렬의 예제입니다.

@ flex 상하 정렬 예제

<div class="exam0">
<div class="childB">ChildB</div>
</div>
<style>
.exam0 .childB {
margin-top: auto;
margin-bottom: auto;
background-color: #00beff;
}
</style>

클래스명 childB는 상하 방향으로 정렬하기 위해서 margin-top과 margin-bottom 값에 auto를 설정하였습니다.

<div class="exam0">
<div class="childB">ChildB</div>
</div>

.exam0 .childB {
margin-top: auto;
margin-bottom: auto;
background-color: #00beff;
}

위의 두 가지 방법을 사용하면 flexbox 내부 요소의 상하, 좌우 정렬을 더 쉽게 구현할 수 있습니다. 다음의 예제는 그 외에 활용할 수 있는 방법들입니다.

@ 두 개 이상인 경우의 예제
아래는 flex를 사용한 container 내부에 두 개의 버튼을 좌우 양 끝으로 위치할 경우의 방법입니다. 먼저 flex 정렬에 사용하는 justify-contents: space-between을 사용할 수 있겠죠. 하지만 이 방법이 아니더라도 margin: auto를 사용하여 구현할 수 있습니다.

<div id="exam1" class="container">
<button class="btn-1">ButtonA</button>
<button class="btn-2">ButtonB</button>
</div>
<style>
#exam1.container {
display: flex;
width: 300px;
height: 300px;
background-color: #ddd;
}
#exam1 .btn-2 {
margin-left: auto;
}
</style>

구현된 코드를 살펴보면 flex가 적용된 container 내부의 버튼 두 개가 각각 간격을 두고 떨어져 정렬된 것을 볼 수 있습니다. 위 예제의 실제 코드는 아래와 같습니다.

<div id="exam1" class="container">
<button class="btn-1">ButtonA</button>
<button class="btn-2">ButtonB</button>
</div>

#exam1.container {
display: flex;
width: 300px;
height: 300px;
background-color: #ddd;
}
#exam1 .btn-2 {
margin-left: auto;
}

참고로 위 코드는 container에 아래와 css를 사용할 경우 동일하게 구현할 수 있을 것 입니다.

#exam1.container {
display: flex;
background-color: #ddd;
justify-contents: space-between;
}

여기까지 FlexBox, flex를 사용하는 레이아웃에서 margin: auto 값을 사용하여 정렬에 사용하는 몇 가지 방법을 알아보았습니다.

! 간단한 팁과 정보

일반적으로 flexbox에서 쉽게 실수하는 경우가 있는데 바로 margin 값을 아래와 같이 적용하는 경우입니다.

margin: 0 auto;

보시면 margin: 0 auto;는 기존에 많이 사용하던 방식의 코드입니다. 즉 좌우의 정렬만 사용할 경우에 이 코드를 많이 사용했는데 부모 요소가 flex인 경우 margin: 0 auto;의 사용 때문에 좌우 정렬만 동작하고 상하 정렬이 동작하지 않게 됩니다.

딱히 고민없이 코드를 작성하다보면 위와 같이 작성하게 되어 상하 정렬이 동작하지 않을 수 있습니다. 이것 때문에
FlexBox에서 상하 정렬이 동작하지 않는건지 잘못 생각할 수 있지만 아래와 같이 변경하여 사용할 경우 잘 동작하지 꼭 알아두시기 바랍니다.

margin: 0 auto; (X)
margin: auto; (O)

별 것 아니지만 실수가 많은 부분이라 한 번 적어두었습니다.

아래의 글도 찾고 계시지 않나요?

[css] 텍스트 outline 외곽선 구현하는 방법 알아보기

[CSS] 스타일 속성 inset 알아보기